<template>
  <section class="contact-info-one contact-us">
    <div class="block-title">
      <p class="block-title__tag-line">欢迎来电</p><!-- /.block-title__tag-line -->
      <h2 class="block-title__title">联系方式</h2><!-- /.block-title__title -->
    </div><!-- /.block-title -->
    <div class="contact-way">
      <div class="one-contact-way">
        <div class="contact-info-one__single fadeInUp">
          <img src="../../assets/icons/address.png" />
          <h3 class="contact-info-one__title">我们的地址</h3>
          <p class="contact-info-one__text"><span v-for="item in address" :key="item">{{item}}<br></span></p>
        </div><!-- /.contact-info-one__single -->
      </div><!-- /.col-lg-4 -->
      <div class="one-contact-way">
        <div class="contact-info-one__single wow fadeInDown" data-wow-duration="1500ms" data-wow-delay="500ms">
          <img src="../../assets/icons/iphone.png" />
          <h3 class="contact-info-one__title">联系电话</h3>
          <p class="contact-info-one__text"> <a href="tel:13883275906">{{phoneNums[0]}}</a> <br>
            <a href="tel:18623079633">{{phoneNums[1]}}</a></p>
        </div><!-- /.contact-info-one__single -->
      </div><!-- /.col-lg-4 -->
      <div class="one-contact-way">
        <div class="contact-info-one__single wow fadeInUp" data-wow-duration="1500ms" data-wow-delay="1000ms">
          <img src="../../assets/icons/email.png" />
          <h3 class="contact-info-one__title">电子邮箱</h3>
          <p class="contact-info-one__text">发送至： <br>{{email}}
          </p>
        </div><!-- /.contact-info-one__single -->
      </div><!-- /.col-lg-4 -->
    </div><!-- /.row -->
  </section>
</template>

<script>
import { getCompanyInfo } from '@/request/api'
export default {
  // 联系我们
  name: 'contactUs',
  data() {
    return {
      phoneNums: [],
      email: '',
      address: ''
    }
  },
  created () {
    getCompanyInfo().then(res => {
      this.phoneNums = res.company_phones
      this.email = res.company_email
      this.address = res.company_address
    })
  }
}
</script>

<style lang="scss">
.contact-us {
  padding-top: 70px;
  padding-bottom: 90px;
  text-align: center;

  .block-title {
    margin-bottom: 50px;
    .block-title__tag-line {
      margin: 0;
      line-height: 1em;
      text-transform: uppercase;
      color: #ff5860;
      font-size: 17px;
      font-family: "Rubik";
      letter-spacing: .1em;
    }
    .block-title__title {
      margin: 0;
      color: #222222;
      font-size: 40px;
      line-height: 48px;
      font-weight: 700;
      letter-spacing: .03em;
      margin-top: 20px;
    }
  }

  .contact-way {
    display: grid;
    grid-template-columns: 300px 300px 300px;
    grid-gap: 20px;
    justify-content: center;
    align-content: center;

    .contact-info-one__single {
      text-align: center;
      background-color: white;
      -webkit-box-shadow: 0px 12px 39px 0px rgba(8, 18, 109, 0.08);
      box-shadow: 0px 12px 39px 0px rgba(8, 18, 109, 0.08);
      padding-top: 78px;
      padding-bottom: 78px;
      margin-bottom: 30px;

      .contact-info-one__title {
        margin: 0;
        font-size: 24px;
        font-weight: 500;
        color: #222222;
        margin-top: 40px;
      }

      .contact-info-one__text {
        margin: 0;
        color: #848484;
        font-size: 17px;
        line-height: 26px;
        margin-top: 30px;
      }

    }

    .fadeInUp {
      -webkit-animation-name: fadeInUp;
      animation-name: fadeInUp;
    }
  }

}
</style>
